<template>
  <div class="app-container">
    <div class="bg-container">
      <div class="top">
        <el-row>
          <el-col :span="4" style="display: flex;align-items: center;justify-content: center">
            <img :src="userInfo.avatar || '@/assets/imgs/circle.png'" alt=""
                 class="image">
          </el-col>
          <el-col :span="15">
            <el-descriptions>
              <el-descriptions-item label="用户名">{{ userInfo.username }}</el-descriptions-item>
              <el-descriptions-item label="昵称">{{ userInfo.nickname }}</el-descriptions-item>
              <el-descriptions-item label="账号ID">{{ userInfo.id }}</el-descriptions-item>
              <el-descriptions-item label="手机号码">{{ userInfo.mobile }}</el-descriptions-item>
              <el-descriptions-item label="邮箱号码">{{ userInfo.email }}</el-descriptions-item>
              <el-descriptions-item label="注册时间">{{ userInfo.createTime }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </div>
      <el-divider/>
      <div class="content">
        <el-radio-group v-model="activeTab" size="large">
          <el-radio-button value="info">基本资料</el-radio-button>
          <el-radio-button value="security">账号安全</el-radio-button>
        </el-radio-group>
        <div class="formBar">
          <el-form v-show="activeTab === 'info'" ref="infoFormRef" :model="infoForm" :rules="infoRules"
                   label-width="100"
                   style="width: 500px">
            <el-form-item label="昵称名" prop="nickname">
              <el-input v-model="infoForm.nickname" placeholder="请输入昵称名"/>
            </el-form-item>
            <el-form-item label="手机号码" prop="mobile">
              <el-input v-model="infoForm.mobile" placeholder="请输入昵称名"/>
            </el-form-item>
            <el-form-item label="用户邮箱" prop="email">
              <el-input v-model="infoForm.email" placeholder="请输入昵称名"/>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="infoForm.sex">
                <el-radio :value="0">男</el-radio>
                <el-radio :value="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleInfoSubmit">提交</el-button>
              <el-button type="danger" @click="resetInfoForm">重置</el-button>
            </el-form-item>
          </el-form>
          <el-form v-show="activeTab === 'security'" ref="securityFormRef" :model="securityForm" :rules="securityRules"
                   label-width="100"
                   style="width: 500px">
            <el-form-item label="旧密码" prop="oldPassword">
              <el-input v-model="securityForm.oldPassword" placeholder="请输入旧密码" show-password type="password"/>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input v-model="securityForm.newPassword" placeholder="请输入新密码" show-password type="password"/>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input v-model="securityForm.confirmPassword" placeholder="请输入确认密码" show-password
                        type="password"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSecuritySubmit">提交</el-button>
              <el-button type="danger" @click="resetSecurityForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script name="UserUpdate" setup>
import {computed, getCurrentInstance, onMounted, reactive, ref, toRefs} from "vue";
import useUserInfoStore from "@/stores/userInfo";
import {changeProfile, resetPassword} from "@/api/user";
import {getUserInfo} from "@/api/login";

const {proxy} = getCurrentInstance()

const activeTab = ref('info')
const infoFormRef = ref()
const securityFormRef = ref()

const userInfo = computed(() => useUserInfoStore().user || {})

const data = reactive({
  infoForm: {},
  infoRules: {
    nickname: [
      {required: true, message: "用户昵称不能为空", trigger: ["blur", "change"]}
    ],
    mobile: [
      {required: true, message: "手机号不能为空", trigger: ["blur", "change"]}
    ],
    email: [
      {required: true, message: "邮箱不能为空", trigger: ["blur", "change"]}
    ],
    sex: [
      {required: true, message: "性别不能为空", trigger: ["blur", "change"]}
    ],
  },
  securityForm: {},
  securityRules: {
    oldPassword: [
      {required: true, message: "旧密码不能为空", trigger: ["blur", "change"]}
    ],
    newPassword: [
      {required: true, message: "新密码不能为空", trigger: ["blur", "change"]}
    ],
    confirmPassword: [
      {required: true, message: "确认密码不能为空", trigger: ["blur", "change"]}
    ],
  },
});

const {infoForm, infoRules, securityForm, securityRules} = toRefs(data);

function resetInfoForm() {
  infoForm.value = {};
  proxy.resetForm("infoFormRef");
  updateUserInfo()
}

function resetSecurityForm() {
  securityForm.value = {};
  proxy.resetForm("securityFormRef");
}

function handleInfoSubmit() {
  infoFormRef.value.validate((valid) => {
    if (valid) {
      changeProfile(infoForm.value).then(res => {
        if (res.data) {
          proxy.$modal.msgSuccess("基本资料修改成功");
          getUserInfo().then(res => {
            if (res.data) {
              useUserInfoStore().setUser(res.data)
              updateUserInfo()
              resetInfoForm()
            }
          })
        }
      })
    }
  });
}

function handleSecuritySubmit() {
  securityFormRef.value.validate((valid) => {
    if (valid) {
      resetPassword(securityForm.value).then(res => {
        if (res.data) {
          if (securityForm.value.newPassword !== securityForm.value.confirmPassword) {
            proxy.$modal.msgError("两次密码输入不一致，请重新输入");
            return
          }
          proxy.$modal.msgSuccess("密码修改成功");
          getUserInfo().then(res => {
            if (res.data) {
              useUserInfoStore().setUser(res.data)
              updateUserInfo()
              resetSecurityForm()
            }
          })
        }
      })
    }
  });
}

function updateUserInfo() {
  infoForm.value.nickname = userInfo.value.nickname
  infoForm.value.mobile = userInfo.value.mobile
  infoForm.value.email = userInfo.value.email
  infoForm.value.sex = parseInt(userInfo.value.sex)
}

onMounted(() => {
  updateUserInfo()
})
</script>

<style lang="scss" scoped>

.bg-container {

  .top {
    padding: 50px 0 30px;

    .image {
      height: 100px;
      width: 100px;
      background-color: rgba(0, 0, 0, 0.1);
      border-radius: 50%;
      cursor: pointer;
    }
  }

  .content {
    min-height: 400px;
    width: calc(100% - 80px);
    padding: 0 40px;

    .formBar {
      width: 100%;
      height: calc(100% - 80px);
      padding: 40px 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>